<template>
	<div class="Word">
		<div class="container">
    <div class="left">
        <h5>待添加区域：</h5>
        <input type="text" id="inputKey1" oninput="loadData();" placeholder="请输入数据区域关键字搜索" />
        <div class="tbcontainer">
            <table id="bkmkTable">
                <thead>
                <tr>
                    <th>数据区域</th>
                    <th>显示文字</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <!-- 大量的数据行 -->
                <!--<tr>-->
                <!--<td>AAA</td>-->
                <!--<td>BBB</td>-->
                <!--<td><button class="normal-button">添加</button></td>-->
                <!--</tr>-->

                </tbody>
            </table>
        </div>
    </div>
    <div class="right">
        <h5>已添加区域：</h5>
        <input type="text" id="inputKey2" oninput="loadData();" placeholder="请输入数据区域关键字搜索" />
        <div class="tbcontainer">
            <table id="bkmkTable2">
                <thead>
                <tr>
                    <th>数据区域</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <!-- 大量的数据行 -->
                <!--<tr>-->
                <!--<td>AAA</td>-->
                <!--<td>BBB</td>-->
                <!--<td><button class="delete-button">删除</button> <button class="normal-button">定位</button></td>-->
                <!--</tr>-->

                </tbody>
            </table>
        </div>
    </div>
</div>
	</div>
</template>
<style>
/* body {
	font-family: Arial, sans-serif;
	font-size:10px;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	background-color: #f5f5f5;
} */

.container {
	display: flex;
	width: 99%;
	max-width: 100%;
}

.left, .right {
	background-color: #fff;
	padding:0 10px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.left{
	flex-grow: 7;
}
.right {
	flex-grow: 3;
}

h5 {
	margin-bottom: 10px;
}

input[type="text"], textarea {
	width: 90%;
	padding: 10px;
	margin-bottom: 15px;
	border-radius: 5px;
	border: 1px solid #ccc;
}

/* 表格样式 */
table {
	border-collapse: collapse;
	width: 100%;
}

th, td {
	padding: 8px;
	text-align: left;
	border-bottom: 1px solid #ddd;
}

th {
	position: sticky;
	top: 0;
	background-color: #f2f2f2;
	z-index: 1;
}

/* 容器样式 */
.tbcontainer {
	height: 300px;
	overflow: auto;
	border: solid 1px #ccc;
	scrollbar-width: thin;
	scrollbar-color: #888 #f2f2f2;
}

/* 滚动条样式 */
.tbcontainer::-webkit-scrollbar {
	width: 8px;
}

.tbcontainer::-webkit-scrollbar-track {
	background: #f2f2f2;
}

.tbcontainer::-webkit-scrollbar-thumb {
	background-color: #888;
	border-radius: 4px;
}

.tbcontainer::-webkit-scrollbar-thumb:hover {
	background-color: #555;
}
.delete-button {
	padding: 3px 3px;
	border: none;
	border-radius: 3px;
	background-color: #f44336;
	color: white;
	font-size: 10px;
	cursor: pointer;
}
.delete-button:hover {
	background-color: #d32f2f;
}

.normal-button {
	padding: 3px 3px;
	border: none;
	border-radius: 3px;
	background-color: #4E7EFF;
	color: white;
	font-size: 10px;
	cursor: pointer;
}
.normal-button:hover {
	background-color: #4E6EF2;
}

.locate-button {
	padding: 3px 3px;
	border: none;
	border-radius: 3px;
	background-color: #0abb87;
	color: white;
	font-size: 10px;
	cursor: pointer;
}
.locate-button:hover {
	background-color: #0a9966;
}
</style>
<script>
		let definedDataRegionJson = window.external.UserParams;
		alert(definedDataRegionJson);
		

	  export default{
	    name: 'Word',
	    data(){
	      return {
	      }
	    },
	    methods:{
			//加载数据
			loadData() {
				var kWord1 = document.getElementById("inputKey1").value;
				var kWord2 = document.getElementById("inputKey2").value;

				var dataRegionJson = pageofficectrl.word.DataRegionsAsJson;
				searchDataRegion(definedDataRegionJson, dataRegionJson, kWord1);
				searchDataRegion2(dataRegionJson, kWord2);
			},

			//加载待添加区域列表
			searchDataRegion(drDefinedJson, drJson, s){
				var tb1 = document.getElementById("bkmkTable");
				var rCount = tb1.rows.length;
				for (var i = 1; i < rCount; i++) {
					tb1.deleteRow(1);
				}

				if('' == drDefinedJson) drDefinedJson = '[]';
				var definedDataRegionObj = JSON.parse(drDefinedJson);
				var dataRegionsJson = drJson;
				if('' == dataRegionsJson) dataRegionsJson = '[]';
				var dataRegionsObj = JSON.parse(dataRegionsJson);

				var oTable = document.getElementById("bkmkTable");
				var tbodyObj = oTable.tBodies[0];
				for(let key in definedDataRegionObj ){
					let drName = definedDataRegionObj[key].name;
					let drCaption =  definedDataRegionObj[key].caption;
					//alert("数据区域："+drName+"; 值："+drValue);

					let bFind = false;
					for(let k in dataRegionsObj){
						if(dataRegionsObj[k].name == drName){
							bFind = true;
							break;
						}
					}

					if(bFind) continue;

					if (drName.toLocaleLowerCase().indexOf(s.toLocaleLowerCase()) > -1) {
						var oTr = tbodyObj.insertRow();
						var oTd = oTr.insertCell();
						oTd.innerHTML = drName;
						oTd = oTr.insertCell();
						oTd.innerHTML = drCaption;
						oTd = oTr.insertCell();
						oTd.innerHTML = '<button class="normal-button" onclick="addDataRegion(\''+drName+'\',\''+drCaption+'\');loadData();">添加</button>';
					}
				}
			},

			//加载已添加区域列表
			searchDataRegion2(drJson, s) {
				//删除所有行
				var tb1 = document.getElementById("bkmkTable2");
				var rCount = tb1.rows.length;
				for (var i = 1; i < rCount; i++) {
					tb1.deleteRow(1);
				}

				let dataRegionsJson = drJson;
				if('' == dataRegionsJson) dataRegionsJson = '[]';
				let dataRegionsObj = JSON.parse(dataRegionsJson);
				var oTable = document.getElementById("bkmkTable2");
				var tbodyObj = oTable.tBodies[0];
				for(let key in dataRegionsObj ){
					let drName = dataRegionsObj[key].name;

					if (drName.toLocaleLowerCase().indexOf(s.toLocaleLowerCase()) > -1) {
						var oTr = tbodyObj.insertRow();
						var oTd = oTr.insertCell();
						oTd.innerHTML = drName;
						oTd = oTr.insertCell();
						oTd.innerHTML = '<button class="delete-button" onclick="deleteDataRegion(\''+ drName +'\');loadData();">删除</button> <button class="locate-button" onclick="locateDataRegion(\''+ drName +'\');">定位</button>';
					}
				}

			},

			locateDataRegion(drName) {
				pageofficectrl.word.LocateDataRegion(drName);
			},

			deleteDataRegion(drName){
				pageofficectrl.word.DeleteDataRegion(drName);
			},

			addDataRegion(drName, drValue){
				pageofficectrl.word.AddDataRegion(drName, drValue);
			},

	    },
		
	    mounted: function(){

			// 将vue中的方法赋值给window
			window.loadData = this.loadData;
			window.Save = this.Save;
			window.searchDataRegion = this.searchDataRegion;
			window.searchDataRegion2 = this.searchDataRegion2;
			window.locateDataRegion = this.locateDataRegion;
			window.deleteDataRegion = this.deleteDataRegion;
			window.addDataRegion = this.addDataRegion;

			loadData();
	    }
	}
</script>

